<template>
    <div class="box">
        <header>
            <van-nav-bar title="详情页" left-arrow @click-left="$router.back()">
                <template #right>
                    <van-icon name="ellipsis" size="18" @click="showShare = true" />
                </template>
            </van-nav-bar>
        </header>
        <div class="content">
            <div><img style="width:100%" :src="detailInfo.image" alt=""></div>
            <div>{{ detailInfo.title }}</div>
            <div>￥<span>{{ detailInfo.price }}</span></div>
        </div>
    </div>
    <footer>

        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
            <van-action-bar-icon icon="cart-o" text="购物车" @click="$router.push('/cart')" :badge="totalCount" />
            <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
            <van-action-bar-button type="warning" text="加入购物车" @click="addCart" />
            <van-action-bar-button type="danger" text="立即购买" />
        </van-action-bar>
    </footer>
    <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" />
</template>
<script>
import request from '@/utils/request.js'
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            detailInfo: {},
            showShare: false,
            options: [
                { name: '微信', icon: 'wechat' },
                { name: '微博', icon: 'weibo' },
                { name: '复制链接', icon: 'link' },
                { name: '分享海报', icon: 'poster' },
                { name: '二维码', icon: 'qrcode' },
            ]
        }
    },
    computed: {
        ...mapGetters(['totalCount'])
    },
    // 生命周期
    mounted() {
        // 通过路由传过来的id去请求接口，获取id对应的那条数据
        console.log(this.$route.params.id, 'id')
        request.get('/detail', {
            params: { id: this.$route.params.id }
        }).then(res => {
            console.log(res, 'res')
            if (res.data.code == 200) {
                this.detailInfo = res.data.data
            }
        })
    },
    methods: {
        addCart() {
            // 点击加入购物车
            // 先判断用户是否登录
            if (localStorage.getItem('token')) {
                // 已登录，执行加入购物车操作
                console.log('已登录')
                // 将这条数据加入到购物车
                this.$store.commit('addItem', this.detailInfo)
            } else {
                // 未登录，跳转到登录页面
                this.$router.push('/login')
            }
        }
    }
}
</script>
